<template>
    <div>
        <!-- 表头 -->
        <div class="Head">
            <!-- 货品信息 -->
            <div style="font-weight: 800"><span style="margin-right: 10px">仓库名称</span></div>
            <div class="Cusname">
                <span style="margin-right: 10px"><span style="color: red">*</span>货品名称</span>
                <span>
                    <el-input v-model="adi.name" placeholder="请输入名称"></el-input>
                </span>
            </div>
            <!-- 货架名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px"><span style="color: red">*</span>货架编码</span>
                <span>
                    <el-input v-model="adi.number" placeholder="请输入名称"></el-input>
                </span>
            </div>
            <div class="Cusname">
                <el-button type="primary" style="margin-top: 10px" @click="comd">新增货品</el-button>
            </div>
        </div>
        <!-- 表头 -->
        <div class="Head2">
            <!-- 增加货品 -->
            <div style="font-weight: 800; width: 100%; float: left"><span style="margin-right: 10px">增加货品</span></div>
            <div class="Cusname" ref="form" :model="adi" prop="pId">
                <span style="margin-right: 10px"><span style="color: red">*</span>选择货品</span>
                <span>
                    <el-select v-model="adi.pId" placeholder="用户状态" style="margin-top: 10px">
                        <el-option v-for="item in ck" :key="item.pId" :label="item.name" :value="item.pId"></el-option>
                    </el-select>
                </span>
            </div>
            <!-- 货架名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px"><span style="color: red">*</span>货品数量</span>
                <span>
                    <el-input v-model="adi.stock" placeholder="请输入名称"></el-input>
                </span>
            </div>
            <div class="Cusname">
                <el-button type="primary" style="margin-top: 10px" @click="increase">保存</el-button>
            </div>
        </div>
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
                <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="product.number" label="货品编号"></el-table-column>
            <el-table-column prop="product.name" label="货品名称"></el-table-column>
            <el-table-column prop="stock" label="数量"></el-table-column>
            <el-table-column prop="contacts" label="条码"></el-table-column>
            <el-table-column label="品牌"></el-table-column>
            <el-table-column label="规格"></el-table-column>
            <el-table-column prop="status" label="保质期(天)"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row)" class="el-icon-edit">修改</el-button>
                    <el-button type="text" size="small" @click="Deldeli(scope.row.wId)" class="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { listcom, comad, comhp, comadd } from '../../api/user.js';
export default {
    data() {
        return {
            ck: [],
            tableData: [],
            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
            // 添加输入框
            adi: {
                name: null,
                number:null,
                stock: null,
                pId: null,
                pcId: null
            },
            pc: {
                pcId: null,
                pageNum: 1,
                pageSize: 10
            },

            total: null
        };
    },
    methods: {
        // 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Rean();
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Rean();
        },
        // listcom渲染  comad货品信息添加  comadd增加货品 comhp新郑
        // 添加
        comd() {
            console.log(22);
            comad(this.adi).then((res) => {
                this.adi.pcId = res.pId;
                this.pc.pcId = res.pId;
                console.log(res);
            });
        },
        rean() {
            comhp(this.pcId).then((res) => {
                this.ck = res.rows;
                // console.log(res.rows);
            });
        },
        // 增加货品
        increase() {
            // console.log(this.adi);
            comadd(this.adi).then((res) => {
                this.tableData=res.rows
                console.log(res);
                this.cadd();
                this.rean()
            });
        },
        cadd() {
            listcom(this.pc).then((res) => {
                this.tableData=res.rows
                console.log(res);
            });
        }
    },
    mounted() {
        this.rean();
    }
};
</script>

<style scoped>
.Head {
    height: 80px;
}
.Head2 {
    height: 80px;
    margin-top: 20px;
}
/* 客户类别 */
.Cusgory {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusgory span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 客户名称 */
.Cusname {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusname span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
</style>